<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Panel</h1>
        <p>Panel is a container with the optional content toggle feature.</p>
    </div>
    <app-demoActions github="panel" stackblitz="panel-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <h5>Regular</h5>
    <p-panel header="Header">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </p-panel>

    <h5>Advanced</h5>
    <p-panel header="Header" [toggleable]="true">
        <ng-template pTemplate="icons">
                <button class="p-panel-header-icon p-link" (click)="menu.toggle($event)">
                    <span class="pi pi-cog"></span>
                </button>
                <p-menu #menu id="config_menu" [model]="items" [popup]="true"></p-menu>
        </ng-template>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </p-panel>

    <p-toast></p-toast>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;PanelModule&#125; from 'primeng/panel';
</app-code>

            <h5>Getting Started</h5>
            <p>Panel is defined with p-panel element.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-panel header="Title"&gt;
    Content
&lt;/p-panel&gt;
</app-code>
            <h5>Toggleable</h5>
            <p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option, default state is defined with collapsed option. By default, toggle icon
                is used to toggle the contents whereas setting toggler to "header" enables clicking anywhere in the header to trigger a toggle.
            </p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-panel header="Title" [toggleable]="true"&gt;
    Content
&lt;/p-panel&gt;
</app-code>

            <h5>Header and Footer Content</h5>
            <p>Header and Footers sections can be customized using <i>header</i> and <i>footer</i> templates.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-panel &gt;
    &lt;ng-template pTemplate="header"&gt;
        Header content here
    &lt;/ng-template&gt;
    Body Content
    &lt;ng-template pTemplate="footer"&gt;
        Footer content here
    &lt;/ng-template&gt;
&lt;/p-panel&gt;
</app-code>

            <h5>Custom Icons</h5>
                <p>Additional icons can be placed at the header section of the panel using the special <i>icons</i> selector. For a unified look, it is suggest to add <i>.p-panel-header-icon</i>
                class to your icons.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-panel&gt;
&lt;ng-template pTemplate="icons"&gt;
    &lt;button pButton class="p-panel-header-icon p-link" (click)="menu.toggle($event)"&gt;
        &lt;span class="pi pi-cog"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;p-menu #menu id="config_menu" [model]="items" [popup]="true"&gt;&lt;/p-menu&gt;
&lt;/ng-template&gt;
</app-code>

            <h5>Animation Configuration</h5>
            <p>Transition of the toggle animation can be customized using the <i>transitionOptions</i> property with a default value as <b>400ms cubic-bezier(0.86, 0, 0.07, 1)</b>, 
                example below disables the animation altogether.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-panel [transitionOptions]="'0ms'"&gt;
&lt;/p-panel&gt;
</app-code>
            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>header</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Header text of the panel.</td>
                        </tr>
                        <tr>
                            <td>toggleable</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Defines if content of panel can be expanded and collapsed.</td>
                        </tr>
                        <tr>
                            <td>collapsed</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Defines the initial state of panel content, supports one or two-way binding as well.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>expandIcon</td>
                            <td>string</td>
                            <td>pi pi-plus</td>
                            <td>Expand icon of the toggle button.</td>
                        </tr>
                        <tr>
                            <td>collapseIcon</td>
                            <td>string</td>
                            <td>pi pi-minus</td>
                            <td>Collapsed icon of the toggle button.</td>
                        </tr>
                        <tr>
                            <td>showHeader</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Specifies if header of panel cannot be displayed.</td>
                        </tr>
                        <tr>
                            <td>transitionOptions</td>
                            <td>string</td>
                            <td>400ms cubic-bezier(0.86, 0, 0.07, 1)</td>
                            <td>Transition options of the animation.</td>
                        </tr>
                        <tr>
                            <td>toggler</td>
                            <td>string</td>
                            <td>icon</td>
                            <td>Specifies the toggler element to toggle the panel content, valid values are "icon" and "header".</td>
                        </tr>
                        <tr>
                            <td>iconPos</td>
                            <td>string</td>
                            <td>right</td>
                            <td>Position of the icons, valid values are "right", "left" and "center".</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onBeforeToggle</td>
                            <td>event.originalEvent: browser event<br>
                                event.collapsed: state as a boolean</td>
                            <td>Callback to invoke before content toggle.</td>
                        </tr>
                        <tr>
                            <td>onAfterToggle</td>
                            <td>event.originalEvent: browser event<br>
                                event.collapsed: state as a boolean</td>
                            <td>Callback to invoke after content toggle.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Templates</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>header</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>content</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>icons</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>footer</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-panel</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-panel-titlebar</td>
                            <td>Header section.</td>
                        </tr>
                        <tr>
                            <td>p-panel-title</td>
                            <td>Title text of panel.</td>
                        </tr>
                        <tr>
                            <td>p-panel-titlebar-toggler</td>
                            <td>Toggle icon.</td>
                        </tr>
                        <tr>
                            <td>p-panel-content</td>
                            <td>Content of panel.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
        <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/panel" class="btn-viewsource" target="_blank">
            <span>View on GitHub</span>
        </a>
        <a href="https://stackblitz.com/edit/primeng-panel-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
            <span>Edit in StackBlitz</span>
        </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Regular&lt;/h5&gt;
&lt;p-panel header="Header"&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
&lt;/p-panel&gt;

&lt;h5&gt;Advanced&lt;/h5&gt;
&lt;p-panel header="Header" [toggleable]="true"&gt;
    &lt;ng-template pTemplate="icons"&gt;
            &lt;button pButton class="p-panel-header-icon p-link" (click)="menu.toggle($event)"&gt;
                &lt;span class="pi pi-cog"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;p-menu #menu id="config_menu" [model]="items" [popup]="true"&gt;&lt;/p-menu&gt;
    &lt;/ng-template&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
&lt;/p-panel&gt;

&lt;p-toast&gt;&lt;/p-toast&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class PanelDemo implements OnInit &#123;
    items: MenuItem[];
    
    constructor(private messageService: MessageService) &#123;&#125;
    
    ngOnInit() &#123;
        this.items = [
            &#123;
                label: 'Options',
                items: [&#123;
                    label: 'Update',
                    icon: 'pi pi-refresh',
                    command: () =&gt; &#123;
                        this.update();
                    &#125;
                &#125;,
                &#123;
                    label: 'Delete',
                    icon: 'pi pi-times',
                    command: () =&gt; &#123;
                        this.delete();
                    &#125;
                &#125;
            ]&#125;,
            &#123;
                label: 'Navigate',
                items: [&#123;
                    label: 'Angular',
                    icon: 'pi pi-external-link',
                    url: 'http://angular.io'
                &#125;,
                &#123;
                    label: 'Router',
                    icon: 'pi pi-upload',
                    routerLink: '/fileupload'
                &#125;
            ]&#125;
        ];
    &#125;

    update() &#123;
        this.messageService.add(&#123;severity:'success', summary:'Success', detail:'Data Updated'&#125;);
    &#125;

    delete() &#123;
        this.messageService.add(&#123;severity:'warn', summary:'Delete', detail:'Data Deleted'&#125;);
    &#125;
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-panel-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
